import {Component, ComponentProps, VueComponent, Hook, Mut, Link} from "vue3-oop";
import styles from "./index.module.scss";
import { NCard, NSpace, NTag } from 'naive-ui'
import { nicon } from "@/utils/IconUtil";

import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css'
import {Snapshot, Menu, SelectionSelect, MiniMap} from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css';
import { FlowableSupport } from './plugins'

import ToolbarPanel from './ToolbarPanel'
import ConfigPanel from './ConfigPanel'
import ShapePanel from './ShapePanel'

interface IProps {
  maxWidth?:number,
  maxHeight?:number
}
@Component()
export default class BpmnDesigner extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    maxWidth: {default: 800},
    maxHeight: {default: 600}
  }

  constructor() {
    super()
  }

  @Mut() private loginFlow?: LogicFlow;

  // 绘制区域REF
  @Link() private bpmnCanvas?: HTMLElement;

  @Hook("Mounted")
  onMounted(){
    LogicFlow.use(FlowableSupport);// flowable支持插件
    LogicFlow.use(Snapshot);// 快照（存为图片）
    LogicFlow.use(MiniMap);// 小地图
    LogicFlow.use(Menu);// 右键点击元素的菜单
    LogicFlow.use(SelectionSelect);

    this.loginFlow = new LogicFlow({
      stopScrollGraph: true,
      stopZoomGraph: true,
      metaKeyMultipleSelected: true,
      grid: {
        size: 10,
        type: 'dot',
      },
      keyboard: {
        enabled: true,
      },
      snapline: true,

      container: this.bpmnCanvas as HTMLElement,

      pluginsOptions: {
        MiniMap: {
          width: 200,
          height: 170,
          headerTitle: '缩略图',
          rightPosition: 20,
          bottomPosition: 100,
        }
      },
    });
    // 加了BpmnXmlAdapter插件，此处应传入XML文本
    this.loginFlow.render();

  }

  render(){
    const height = this.props.maxHeight, width = this.props.maxWidth;
    return(

      <NCard
        class={[styles.bpmn_designer]}
        style={{height:`${height}px`}}
      >
        {{
          header:()=>(
            <NSpace><NTag bordered={false} size={'large'} style={{fontSize:'18px'}} color={{color:'whitesmoke'}}>
              {{ avatar: nicon("DocumentFlowchart20Filled"), default: ()=>"BPMN绘图" }}
            </NTag></NSpace>
          ),
          'header-extra':()=>(<>{ this.loginFlow && <ToolbarPanel logicFlow={this.loginFlow} /> }</>),
          default:()=>(
            <NCard
              {...{id:"bpmnWrapper"}}
              class={[styles.bpmn_canvas_wrapper]}
            >
              <div
                ref="bpmnCanvas"
                class={[styles.bpmn_canvas_view,'viewport']}
              />
              { this.loginFlow && <ShapePanel logicFlow={this.loginFlow} /> }
              { this.loginFlow && <ConfigPanel logicFlow={this.loginFlow} drawerTo="#bpmnWrapper" /> }
            </NCard>
          )
        }}
      </NCard>
    )
  }
}